<template>
	<view class="tee-view sku-container fade-in">
		<view class="tee-view sku-header">
			<view class="tee-view sku-header__image-wrap">
				<image src="https://image01.yzcdn.cn/upload_files/2021/11/19/FpWURRFrnBdkVoMA0V7jT3a_x4B0.jpg!small.webp"
					class="tee-image sku-header__image aspect-fill"></image>
					<view class="tee-view sku-header__icon"></view>
			</view>
			<view class="tee-view sku-header__goods-info">
				<view class="tee-view">
					<view class="tee-view sku__price">
						<view class="tee-view sku__price-info"> <text class="tee-text sku__price-symbol">￥</text> <text
								class="tee-text sku__price-num">39.90-59.90</text></view>
						<view class="tee-view sku__price-tag-wrap">
							<view class="tee-view sku__price-tag"
								style="display: inline-flex; align-items: center; height: 20px; padding: 0px 6px; color: var(--ump-main-text, #ffffff); background: var(--ump-main-bg, #323233); border-radius: 1rem;">
								<text class="tee-text" style="font-size: 12px;">
									券后￥
								</text> <text class="tee-text sku__price-tag__inner"
									style="font-size: 16px; font-weight: 600; padding: 0px;">
									34.9
								</text> <text class="tee-text">
									起
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tee-view"></view>
				<view class="tee-view">
					<view class="tee-view sku-header__item sku__stock">
						剩余
						<text class="tee-text sku__stock-num">9254</text>
						件
					</view>
					<view class="tee-view sku-header__item">
						请选择 数量
					</view>
				</view>
			</view>
		</view>
		<view class="tee-view sku-body">
			<view class="tee-view"></view>
			<view class="tee-view sku-row-wrap">
				<view class="tee-view sku-row is-first is-last">
					<view class="tee-view sku-row__title">
						数量
					</view>
					<view class="tee-view sku-row__body" id="scroll">
						<view class="tee-view sku-row__item sku-row__item--show-price sku-row__item--has-price-affect">
							<view class="tee-view sku-row__item-main">
								<view class="tee-view sku-row__item-name">
									<view class="tee-view sku-row__item-name-text">单瓶装500G</view>
								</view>
								<view class="tee-view sku-row__item-price">￥39.90</view>
							</view>
							<view class="tee-view sku-row__item-label">
								<view class="tee-view sku-row__item-label-text">热销</view>
							</view>
						</view>
						<view class="tee-view sku-row__item sku-row__item--show-price sku-row__item--has-price-affect">
							<view class="tee-view sku-row__item-main">
								<view class="tee-view sku-row__item-name">
									<view class="tee-view sku-row__item-name-text">两瓶装1000G</view>
								</view>
								<view class="tee-view sku-row__item-price">￥59.90</view>
							</view>
						</view>
						<view class="tee-view sku-row__item sku-row__item--show-price sku-row__item--has-price-affect">
							<view class="tee-view sku-row__item-main">
								<view class="tee-view sku-row__item-name">
									<view class="tee-view sku-row__item-name-text">无花果沐浴露+洗发水*500g+赠沐浴球</view>
								</view>
								<view class="tee-view sku-row__item-price">￥59.90</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tee-view"> </view>
			<view class="tee-view sku-stepper-stock">
				<view class="tee-view sku__stepper-title">
					购买数量
				</view>
				<view class="tee-view sku__stepper van-stepper " size="small">
					<view class="tee-view van-stepper__minus van-stepper__minus--disabled " data-type="minus"
						hover-class="van-stepper__minus--hover" hover-stay-time="70"></view> <input type="number"
						maxlength="140" placeholder="" class="van-stepper__input ">
					<view class="tee-view van-stepper__plus " data-type="plus" hover-class="van-stepper__plus--hover"
						hover-stay-time="70"></view>
				</view> <text class="tee-text sku__stepper-quota">

				</text>
			</view>
			<view class="tee-view"></view>
		</view>
		<view class="tee-view"> </view>
		<view class="tee-view sku-actions">
			<view class="tee-view sku-actions__btn-wrap sku-block__btn">
				<view class="tee-view user-authorize user-authorize-continer sku-actions__inner">
					<view class="tee-view user-authorize user-authorize__comnponent">
						<view class="tee-view user-authorize__btn-empty"
							style="background-color: transparent; display: block; border: 0px; padding: 0px; width: 100%;">
							<button class="sku-actions__btn sku-actions__btn--main">
								<text class="tee-text sku-actions__btn-content"> 下一步</text></button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	
	.sku-container, .sku-header {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	}
	.sku-header {
	    -webkit-flex-shrink: 0;
	    flex-shrink: 0;
	    margin: 0 16px;
	}
	.sku-header__img-wrap {
	    position: relative;
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 96px;
	    flex: 0 0 96px;
	    width: 96px;
	    height: 96px;
	    margin: 12px 8px 12px 0;
	    overflow: hidden;
	    border-radius: 4px;
	}
	.sku-header__img {
	    width: 100%;
	    height: 100%;
	}
	.sku-header__goods-info {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-pack: end;
	    -webkit-justify-content: flex-end;
	    justify-content: flex-end;
	    padding: 16px 20px 12px 0;
	}
	.sku__price, .sku__price-info {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	}
	.sku__price {
	    position: relative;
	    left: -2px;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    color: var(--price,#323233);
	    line-height: 1;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
	}
	.sku__price-symbol {
	    font-size: 16px;
	    font-weight: 600;
	    margin-right: 2px;
	    line-height: 18px;
	}
	.sku__price-num {
	    position: relative;
	    font-size: 22px;
	    font-weight: bolder;
	    vertical-align: initial;
	    margin-right: 8px;
	}
	.sku__price-num {
	    position: relative;
	    font-size: 22px;
	    font-weight: bolder;
	    vertical-align: initial;
	    margin-right: 8px;
	}
	.sku__price {
	    position: relative;
	    left: -2px;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    color: var(--price,#323233);
	    line-height: 1;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
	}
	
	.sku__price-tag-wrap {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	}
	.sku__price-tag {
	    position: relative;
	    display: inline-block;
	    margin: 2px 8px 2px 0;
	    color: var(--tag-text,#323233);
	    background: var(--tag-bg,#f2f2ff);
	    border-radius: 1rem;
	}
	.sku__price-tag__inner {
	    position: relative;
	    z-index: 2;
	    font-size: 12px;
	    text-align: center;
	    white-space: nowrap;
	    line-height: 17px;
	    padding: 0 4px;
	    height: 16px;
	}
	.sku-body {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1 1 auto;
	    flex: 1 1 auto;
	    min-height: 44px;
	    overflow-y: scroll;
	    -webkit-overflow-scrolling: touch;
	}
	
	.sku-row.is-last {
	    margin-bottom: 0;
	}
	.sku-row.is-first {
	    margin-top: 0;
	    padding-top: 12px;
	}
	.sku-row {
	    margin: 0 0 12px;
	    position: relative;
	}
	.sku-row__title {
	    padding: 0 16px;
	    padding-bottom: 12px;
	}
	.sku-row__body {
	    padding: 0 16px;
	}
	.sku-row__item.sku-row__item--has-price-affect {
	    min-width: 76px;
	    min-height: 36px;
	    -webkit-box-pack: start;
	    -webkit-justify-content: flex-start;
	    justify-content: flex-start;
	}
	
	.sku-row__item {
	    position: relative;
	    overflow: hidden;
	    color: #323233;
	    border-radius: 4px;
	    cursor: pointer;
	    display: -webkit-inline-box;
	    display: -webkit-inline-flex;
	    display: inline-flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    min-width: 48px;
	    margin: 0 12px 12px 0;
	    font-size: 13px;
	    line-height: 16px;
	    vertical-align: middle;
	    background: #f7f8fa;
	    overflow: inherit;
	    -webkit-transition: height .1s ease;
	    transition: height .1s ease;
	}
	.sku-row__item.sku-row__item--has-price-affect .sku-row__item-main {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    min-height: 30px;
	    padding: 3px 8px;
	}
	.sku-row__item-main {
	    z-index: 1;
	    border-radius: 4px;
	}
	.sku-row__item.sku-row__item--has-price-affect .sku-row__item-name {
	    padding: 0;
	}
	.sku-row__item-name {
	    padding: 8px;
	}
	.sku-row__item.sku-row__item--has-price-affect .sku-row__item-price {
	    line-height: 1em;
	}
	.sku-row__item-price {
	    margin-top: 1px;
	    margin-left: -2px;
	    color: #969799;
	    font-size: 10px;
	}
	.sku-row__item-label {
	    overflow: hidden;
	    position: absolute;
	    top: 0;
	    -webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	    right: -6px;
	    z-index: 3;
	    min-width: 30px;
	    border-radius: 1.2rem;
	    color: var(--tag-text,#323233);
	    font-size: 10px;
	    background: #fff;
	    text-align: center;
	    white-space: nowrap;
	}
	.sku-row__item-label-text {
	    padding: 0 4px;
	    line-height: 12px;
	    border-radius: 1.2rem;
	    background: var(--tag-bg,#f2f2ff);
	}
</style>
